<%- contentFor('heroContent') %>
  <!-- Hero Banner with Search -->
  <div class="hero-banner search-hero-banner">
    <div class="hero-content">
      <h1>图书搜索结果</h1>
      <div class="search-box-container">
        <form action="/books/search" method="GET" class="main-search-form">
          <div class="search-select-wrapper">
            <select name="searchType">
              <option value="all" <%=searchType==='all' ? 'selected' : '' %>>All</option>
              <option value="title" <%=searchType==='title' ? 'selected' : '' %>>Title</option>
              <option value="author" <%=searchType==='author' ? 'selected' : '' %>>Author</option>
              <option value="isbn" <%=searchType==='isbn' ? 'selected' : '' %>>ISBN(13 digits)</option>
              <option value="publisher" <%=searchType==='publisher' ? 'selected' : '' %>>Publisher</option>
            </select>
          </div>
          <input type="text" name="query" value="<%= searchQuery %>" placeholder="搜索图书..." class="main-search-input">
          <button type="submit" class="main-search-btn">
            <i class="search-icon"></i>
          </button>
        </form>
      </div>
    </div>
  </div>

  <div class="page-container">
    <div class="book-list-content full-width">
      <div class="book-list-header">
        <h1>图书搜索结果</h1>
        <% if (searchQuery) { %>
          <p>找到 <%= totalItems %> 条与 "<%= searchQuery %>" 相关的图书</p>
          <% } else { %>
            <p>请输入搜索关键词</p>
            <% } %>
      </div>

      <% if (error) { %>
        <div class="error-message">
          <p>
            <%= error %>
          </p>
        </div>
        <% } %>

          <!-- 列表视图 -->
          <div class="books-list">
            <% if (results && results.length> 0) { %>
              <% results.forEach(function(book) { %>
                <div class="book-list-item">
                  <a href="/books/detail/<%= book.id %>" class="book-list-cover">
                    <% if (book.CoverImage) { %>
                      <img src="<%= book.CoverImage %>" alt="<%= book.Title || 'Book Cover' %>">
                      <% } else { %>
                        <img src="/images/img.png" alt="<%= book.Title || 'Book Cover' %>" class="placeholder-image">
                        <% } %>
                  </a>
                  <div class="book-list-info">
                    <div>
                      <h3 class="book-list-title">
                        <a href="/books/detail/<%= book.id %>" style="text-decoration: none; color: inherit;">
                          <%= book.Title || 'Book Title' %>
                        </a>
                      </h3>
                      <% if (book.Authors) { %>
                        <p class="book-list-author">
                          <%= book.Authors %>
                        </p>
                        <% } %>
                          <% if (book.Publisher) { %>
                            <p class="book-list-publisher">
                              <%= book.Publisher %>
                            </p>
                            <% } %>
                              <% if (book.ISBN) { %>
                                <p class="book-list-isbn">ISBN: <%= book.ISBN %>
                                </p>
                                <% } %>
                    </div>
                  </div>
                </div>
                <% }); %>
                  <% } else if (searchQuery) { %>
                    <p class="no-data">没有找到与 "<%= searchQuery %>" 相关的图书</p>
                    <% } %>
          </div>

          <!-- 分页 -->
          <% if (results && results.length> 0 && pagination.total > 1) { %>
            <div class="pagination">
              <div class="pagination-controls">
                <% if (pagination.hasPrev) { %>
                  <a href="/books/search?query=<%= encodeURIComponent(searchQuery) %>&searchType=<%= searchType %>&page=1"
                    class="pagination-btn">首页</a>
                  <a href="/books/search?query=<%= encodeURIComponent(searchQuery) %>&searchType=<%= searchType %>&page=<%= pagination.current - 1 %>"
                    class="pagination-btn">&laquo;</a>
                  <% } %>

                    <% let startPage=Math.max(1, pagination.current - 2); let endPage=Math.min(pagination.total,
                      pagination.current + 2); %>
                      <% if (startPage> 1) { %>
                        <a href="/books/search?query=<%= encodeURIComponent(searchQuery) %>&searchType=<%= searchType %>&page=1"
                          class="pagination-btn">1</a>
                        <% if (startPage> 2) { %>
                          <span class="pagination-ellipsis">...</span>
                          <% } %>
                            <% } %>

                              <% for(let i=startPage; i <=endPage; i++) { %>
                                <a href="/books/search?query=<%= encodeURIComponent(searchQuery) %>&searchType=<%= searchType %>&page=<%= i %>"
                                  class="pagination-btn <%= i === pagination.current ? 'active' : '' %>">
                                  <%= i %>
                                </a>
                                <% } %>

                                  <% if (endPage < pagination.total) { %>
                                    <% if (endPage < pagination.total - 1) { %>
                                      <span class="pagination-ellipsis">...</span>
                                      <% } %>
                                        <a href="/books/search?query=<%= encodeURIComponent(searchQuery) %>&searchType=<%= searchType %>&page=<%= pagination.total %>"
                                          class="pagination-btn">
                                          <%= pagination.total %>
                                        </a>
                                        <% } %>

                                          <% if (pagination.hasNext) { %>
                                            <a href="/books/search?query=<%= encodeURIComponent(searchQuery) %>&searchType=<%= searchType %>&page=<%= pagination.current + 1 %>"
                                              class="pagination-btn">&raquo;</a>
                                            <a href="/books/search?query=<%= encodeURIComponent(searchQuery) %>&searchType=<%= searchType %>&page=<%= pagination.total %>"
                                              class="pagination-btn">末页</a>
                                            <% } %>
              </div>
            </div>
            <% } %>
    </div>
  </div>

  <style>
    .full-width {
      width: 100%;
    }
  </style>
